<template>
    <div class="slot-popup">
        <van-popup v-model:show="popupShow" round :style="{ background: 'var(--background-color)', padding: '20rem' }">
            <div class="slot-popup__container" v-if="type === 'browse' || type === 'collect'">
                <div class="item" v-for="item in popupList" @click="pathTo(item)">
                    <img :src="baseURL + '/svg/' + item.name + '.svg'" alt="">
                    <div class="item__content">
                        <span>{{ item.name }}</span>
                    </div>
                </div>
            </div>
            <div class="slot-popup__container" v-else>
                <div class="card" v-for="item in popupList">
                    <div class="card__goods">
                        <div @click="pathTo(it)" v-for="it in JSON.parse(item.gids)">
                            <img :src="baseURL + '/svg/' + it.name + '.svg'" alt="">
                            <span>x{{ it.count }}</span>
                        </div>
                    </div>
                    <div class="card__content">
                        <p><span>${{ item.total }}</span> </p>

                        <p>共 {{ JSON.parse(item.gids).length }} 件商品</p>
                        <p>{{ dayjs(item.time).format("YYYY-MM-DD") }} </p>
                    </div>

                </div>
            </div>
        </van-popup>
    </div>
</template>
<script setup lang="ts">
import dayjs from 'dayjs';
import { baseURL } from '@/api/request';
import { defineModel, withDefaults } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter()
const popupShow = defineModel<boolean>();
interface Props {
    popupList: Array<any>;
    type: string;
}
withDefaults(defineProps<Props>(), {
    popupList: null,
    type: ""
})
const pathTo = (item) => {
    router.push({
        path: `/details/${item.id}`,
        query: { item: JSON.stringify(item) },
    })
}
</script>
<style lang="scss">
.slot-popup {
    font-size: 16rem;

    &__container {
        @include flex(row, center);
        flex-wrap: wrap;
        max-width: 300rem;
        min-width: 280rem;
        max-height: 220rem;
        overflow: scroll;

        .card {
            height: 100rem;
            width: 100%;
            border-radius: 10rem;
            box-sizing: border-box;
            @include flex($ai: flex-end, $jc: space-between);
            padding-right: 12rem;
            margin: 4rem;
            box-shadow: 1rem 2rem 6rem var(--shadow2-color);

            &__content {
                font-size: 14rem;
                margin-left: 10rem;
                @include flex(column, center);

                p {
                    margin-bottom: 6rem;
                    color: #333;

                    span {
                        color: rgba($color: #ffcd41, $alpha: 0.7);
                        font-weight: 700;
                        font-size: 24rem;
                    }

                    &:last-child {
                        color: #bbb;
                        font-size: 12rem;
                        margin-bottom: 10rem;
                        font-weight: 100;
                    }
                }
            }

            &__goods {
                width: 180rem;
                height: 100%;
                @include flex($ai: center);
                padding: 10rem;
                box-sizing: border-box;
                overflow: scroll;
                flex-wrap: nowrap;

                >div {
                    flex-shrink: 0;
                    width: 74rem;
                    height: 74rem;
                    margin-right: 10rem;
                    box-sizing: border-box;
                    box-shadow: inset 1rem 1rem 4rem var(--shadow2-color);
                    border-radius: 10rem;
                    @include flex($jc: center, $ai: center);
                    position: relative;

                    span {
                        @include absolutePOS($b: 6rem, $r: 6rem);
                        font-weight: 100;
                        color: #bbb;
                        font-size: 12rem;

                    }

                    >img {
                        height: 78%;
                        width: 78%;
                    }

                    &:last-child {
                        margin-right: 0rem;
                    }
                }
            }
        }

        .item {
            height: 100rem;
            width: 86rem;
            border-radius: 10rem;
            box-shadow: inset 1rem 2rem 6rem var(--shadow2-color);
            color: var(--font-color);
            margin-right: 20rem;
            @include flex(column, center, space-between);
            padding: 14rem 0 12rem;
            box-sizing: border-box;

            &__content {
                font-size: 14rem;
            }

            img {
                width: 60rem;
                height: 50rem;
            }

            &:nth-child(n+4) {
                margin-top: 20rem;
            }

            &:nth-child(3n) {
                margin-right: 0rem;

            }
        }
    }
}
</style>